<template>
	<view v-if="isShow">
		<u-popup :show="isShow" :customStyle="{
				background: '#ffffff',
				borderRadius:'20rpx 20rpx 0 0',
				overflow:'hidden' }" @close="close" @open="open">
			<view class="popup-container">
				<view class="popup-title">{{panelTitle || "分享"}}</view>
				<view class="share-ways">
					<view class="way-item" @click.stop="hadnleWay('pyq')">
						<image src="/static/share-pyq.png" mode="aspectFill"></image>
						<view class="way-name">朋友圈</view>
					</view>
					<view class="way-item" @click.stop="hadnleWay('wx')">
						<image src="/static/share-wx.png" mode="aspectFill"></image>
						<view class="way-name">微信</view>
					</view>
					<view class="way-item" @click.stop="hadnleWay('qq')">
						<image src="/static/share-qq.png" mode="aspectFill"></image>
						<view class="way-name">QQ</view>
					</view>
					<view class="way-item" @click.stop="hadnleWay('puahy')">
						<image src="/static/logo.png" mode="aspectFill"></image>
						<view class="way-name">AA好友</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "sharePanel",
		data() {
			return {
				isShow: false,
				app_download_url: getApp().globalData.staticConfig.app_download_url + "?uid=" + getApp().globalData
					.userInfo.user.uid, // 引导下载app H5
				share_image_url: getApp().globalData.staticConfig.share_image_url, // 默认分享图
				opts: {},
				panelTitle: ""
			};
		},
		methods: {
			hadnleWay(action) {
				const {
					title,
					imageUrl
				} = this.opts
				switch (action) {
					case "pyq": // 朋友圈
					case "wx": // 微信
						// #ifdef APP-PLUS
						this.$emit("shareSuccess")
						this.close()
						uni.share({
							provider: "weixin",
							scene: action == "pyq" ? "WXSceneTimeline" : "WXSceneSession",
							type: 0,
							href: this.app_download_url, // 必传
							imageUrl: imageUrl || this.share_image_url, // 必传
							title: title || "上基金App",
							summary: "聊天交友，就上基金App！单身男女的选择",
							success: res => {
								console.log("分享success---", JSON.stringify(res));
								// // 实际并不能收到是否真的成功
								// this.$emit("shareSuccess")
							},
							fail: error => {
								console.log("分享fail---", error);
								if (/未安装/g.test(error.errMsg) && error.code == -8) {
									uni.showToast({
										title: "请先安装微信",
										icon: "none"
									})
								}
							}
						});

						// #endif

						// #ifdef H5 || MP-WEIXIN
						uni.showToast({
							title: "请在app端操作",
							icon: "none"
						})
						// #endif

						return;
					case "qq": // qq
						break;
					case "puahy": // AA好友
						break;
				}

				uni.setClipboardData({
					data: this.app_download_url,
					success: res => {
						this.close()
						this.$emit("shareSuccess")
						uni.showToast({
							title: "分享链接复制成功",
							icon: "none",
							duration: 4000
						})
					}
				})
			},
			show(opts) {
				uni.hideTabBar()
				this.opts = opts || {}
				this.panelTitle = opts.panelTitle
				this.isShow = true
			},
			close() {
				uni.showTabBar()
				this.isShow = false
			},
			open() {},
		}
	}
</script>

<style lang="scss" scoped>
	.popup-container {
		min-height: 334rpx;

		.popup-title {
			line-height: 56rpx;
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #303030;
			text-align: center;
			padding: 42rpx 0 0 0;
			margin-bottom: 66rpx;
		}

		.share-ways {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 42rpx;

			.way-item {
				text-align: center;
				margin: 0 47rpx 47rpx 47rpx;

				image {
					width: 84rpx;
					height: 84rpx;
					border-radius: 50%;
				}

				.way-name {
					height: 34rpx;
					line-height: 34rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #545454;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>